<template>
    <div class="timeDetail-wrap">
      <scrollList ref="timeList" :loadMore="false" :bounce="false">
        <div slot="defaultScroll">
          <div class="time-box" v-if="timeArr.length">
            <div class="time-box-item" v-for="(item, index) in timeArr" v-bind:key="`timeDetail-${index}`">
              <div class="time-box-tip"><span v-if="index === 0">开放时间</span></div>
              <div class="time-week">
                {{item.name}}
              </div>
              <div class="time-context">
                <div class="context-item" v-for="(child, index) in item.value.split(',')" :key="`time-item-${index}`">
                  {{child}}
                </div>
              </div>
            </div>
          </div>
          <div class="empty-wrap" v-else>
            <Empty v-show="loaded"/>
          </div>
        </div>
      </scrollList>
    </div>
</template>

<script type="text/ecmascript-6">
  import scrollList from '../components/scroll/list';
  import {openTimeDetail} from '../mock/mock';
  import functionalTool from '../utils/functionTools';
  import Empty from '../components/other/empty';
  export default {
    name: 'timeDetail',
    data () {
      return {
        timeArr: [],
        loaded: !1
      };
    },
    mounted () {
      const stubId = functionalTool.getUrlParam('stubId');
      this.initialData(stubId).then(() => {
        this.$nextTick(() => {
          this.$refs.timeList && this.$refs.timeList._initComponent();
        });
      });
    },
    methods: {
      async initialData (id) {
        try {
          const resData = await openTimeDetail({stubId: id});
          if (resData.data.code === '200') {
            for (let i in resData.data.data) {
              this.timeArr.push({
                name: i,
                value: resData.data.data[i]
              });
            }
          } else {
            this.timeArr = [];
          }
          this.loaded = !0;
        } catch (e) {
          console.log(e);
        }
      }
    },
    components: {
      scrollList,
      Empty
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">
  @import '../assets/css/mixin.styl';
  .timeDetail-wrap
    position relative
    height 100%
    background-color #f7f7f7
    .empty-wrap
      height rpx(160)
    .time-box
      background-color #fff
      font-size rpx(26)
      .time-box-item
        width 100%
        color #8c8c8c
        padding rpx(26) 0
        display flex
        border-1px(#f2f2f2, 0, solid)
        line-height rpx(46)
        &:last-child
          border none
        .time-box-tip
          width rpx(160)
          flex 0 0 rpx(160)
          text-align center
          color #333
        .time-week
          width rpx(60)
          flex 0 0 rpx(60)
          text-align left
        .time-context
          width rpx(400)
          display flex
          flex-wrap wrap
          .context-item
            width rpx(200)
            flex 0 0 rpx(200)
            text-align center
</style>
